import { useEffect } from 'react'
import { Form, Input, Button } from 'antd'
import { customTrimFunc } from '@/utils/utils.jsx';

const SeachContent = ({ query, queryChangeFunc }) => {
  const [form] = Form.useForm()

  useEffect(()=>{
    form.resetFields()
  },[query])

  const onFinish = (value) => {
    queryChangeFunc(customTrimFunc(value));
  }

  const onReset = () => {
    queryChangeFunc({}, true)
  }

  return <>
    <Form 
      form={form} 
      initialValues={{...query}}
      name="qualification-form" 
      className="search-form-style"
      onFinish={onFinish}
      style={{ margin: '12px 0' }}
    >

      <Form.Item name="templateName" label="模板名称">
        <Input placeholder="请输入模板名称" style={{width:135}}/>
      </Form.Item>

      <Form.Item label="" colon={false}>
        <Button type="primary" htmlType="submit">查询</Button>
        <Button style={{marginLeft:12}} onClick={onReset}>重置</Button>
      </Form.Item>
    </Form>
  </>
}

export default SeachContent